<template>
  <div class="box">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="0"
      :immediate-check="false"
    >
      <li v-for="item in dataList" :key="item.filmId">
        <div class="left">
          <img :src="item.poster" />
        </div>
        <div class="center">
          <div>
            <span class="name">{{ item.name }}</span>
            <span class="item">{{item.item.name}}</span>
          </div>
          <div>
            <span class="mainactor">主演：{{ item.actors | actorfilter}}</span>
          </div>
          <div>
            <span class="address">{{ item.nation }} | {{item.runtime}} 分钟</span>
          </div>
        </div>
        <div class="right" v-if="item.isPresale">
          预购
        </div>
      </li>
    </van-list>
  </div>
</template>

<script>
import http from "../request/http";
export default {
  name: "comingSoon",
  data() {
    return {
      dataList: [],
      loading: false,
      finished: false,
      current: 1,
      total: 0
    };
  },
  methods: {
    onLoad() {
      if (this.dataList.length == this.total) {
        this.finished = true;
        return;
      }
      this.current++;
      http({
        url: `/gateway?cityId=${this.$store.state.cityId}&pageNum=${this.current}&pageSize=10&type=2&k=9423013`,
        headers: {
          "X-Host": "mall.film-ticket.film.list"
        }
      }).then(res => {
        if (res.status == 0) {
          console.log(res.data);
          this.dataList = [...this.dataList, ...res.data.films];
          this.total = res.data.total;
          this.loading = false;
        }
      });
    }
  },
  mounted() {
    http({
      url: "/gateway?cityId=130100&pageNum=1&pageSize=10&type=2&k=9423013",
      headers: {
        "X-Host": "mall.film-ticket.film.list"
      }
    }).then(res => {
      if (res.status == 0) {
        console.log(res.data);
        let { films } = res.data;
        this.dataList = films;
      }
    });
  },
  filters:{
    actorfilter(actors){
      if(actors === undefined) return '暂无主演'
      return actors.map(item=>item.name).join(' ')
    }
  }
};
</script>

<style>
.box {
  background: #fff;
}
.van-list {
  margin-left: 15px;
}
.van-list li {
  display: flex;
  padding: 15px 15px 15px 0;
  height: 94px;
  position: relative;
  border-bottom: 1px solid #ededed;
}
.left{
  width:66px;
  height:94px;
  display:block;
}
.left img{
  width:70px;
  height:100%;
  display:block;
}
.center{
  width:calc(100%-116px);
  padding:0 10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.right{
  top:34px;
  line-height:25px;
  height:25px;
  width:50px;
  color:#ff5f16;
  font-size:13px;
  text-align:center;
  border-radius:2px;
  position:relative;
}
.right::after {
  content: " ";
  transform: scale(.5);
  position: absolute;
  border: 1px solid #ffb232;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border-radius: 4px;
}
.item {
  font-size: .09rem;
  color: #fff;
  background-color: #d2d6dc;
  height: .14rem;
  line-height: .14rem;
  padding: 0 .02rem;
  border-radius: 2px;
  vertical-align: middle;
}
.name {
  max-width: calc(100% - .25rem);
  color: #191a1b;
  font-size: .16rem;
  height: .22rem;
  line-height: .22rem;
  margin-right: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.mainactor {
  font-size: .13rem;
  color: #797d82;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.address {
  font-size: .13rem;
  color: #797d82;
}
.center div {
  margin-top: 6px;
}
</style>
